<template>
    <Layout :router="false">
        <div class="home no-scrollbar">
            <div class="home-top">
                <el-card shadow="hover" class="home-top-left">
                    <!--          <div class="left-search">
                                <el-radio-group v-model="searchForm.dataSource">
                                  <el-radio label="0" size="large">门店数据</el-radio>
                                  <el-radio label="1" size="large">区域数据</el-radio>
                                </el-radio-group>
                              </div>-->
                    <TestData class="histogram"/>
                    <!--          <StockData class="histogram" />-->
                </el-card>
                <el-card shadow="hover" class="home-top-center">
                    <!--          <div class="left-search">
                                <div class="search-title">门店名称 :</div>
                                <el-select class="search-form" placeholder="请选择门店" size="small">
                                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                              </div>-->
                    <ReportAnalysis class="earchs"/>
                </el-card>
                <!--        <el-card shadow="hover" class="home-top-right">
                          <div class="left-search">
                            <div class="search-title">销售排行榜(前10)</div>
                            <el-radio-group v-model="searchForm.dataSource" style="margin-left: 10px">
                              <el-radio label="0" size="large">当日</el-radio>
                              <el-radio label="1" size="large">当月</el-radio>
                            </el-radio-group>
                          </div>
                          <el-table class="earchs" :data="[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]" height="100%">
                            <el-table-column prop="businessNo" label="排名" show-overflow-tooltip>
                              <template #default="scope">
                                {{ scope.row.businessNo || '&#45;&#45;' }}
                              </template>
                            </el-table-column>
                            <el-table-column prop="callName" label="数量" show-overflow-tooltip>
                              <template #default="scope">
                                {{ scope.row.callName || '&#45;&#45;' }}
                              </template>
                            </el-table-column>
                            <el-table-column prop="callNum" label="门店" show-overflow-tooltip>
                              <template #default="scope">
                                {{ scope.row.callNum || '&#45;&#45;' }}
                              </template>
                            </el-table-column>
                            <el-table-column prop="bond" label="战区" show-overflow-tooltip>
                              <template #default="scope">
                                {{ scope.row.bond || '&#45;&#45;' }}
                              </template>
                            </el-table-column>
                          </el-table>
                        </el-card>-->
            </div>
            <!--      <div class="home-bottom">
                    <el-card shadow="hover" class="home-bottom-left">
                      <AccountData />
                    </el-card>
                    <el-card shadow="hover" class="home-bottom-right">
                      <GrossProfitAnalysis />
                    </el-card>
                  </div>-->
        </div>
    </Layout>
</template>

<script setup lang="ts">
    import {reactive} from 'vue';
    import Layout from '@/Layout/index.vue';
    import TestData from './TestData.vue';
    import StockData from './StockData.vue';
    import AccountData from './AccountData.vue';
    import GrossProfitAnalysis from './GrossProfitAnalysis.vue';
    import ReportAnalysis from './ReportAnalysis.vue';

    const searchForm = reactive({
        dataSource: '0',
    });

    const options = [
        {
            value: 'Option1',
            label: 'Option1',
        },
        {
            value: 'Option2',
            label: 'Option2',
        },
        {
            value: 'Option3',
            label: 'Option3',
        },
        {
            value: 'Option4',
            label: 'Option4',
        },
        {
            value: 'Option5',
            label: 'Option5',
        },
    ];
</script>

<style scoped lang="scss">
    .home {
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding-top: 20px;
        overflow-y: auto;

        ::v-deep(.el-card__body) {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;

            .histogram {
                flex: 1;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
            }
        }

        &-top {
            height: 55%;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            margin-bottom: 20px;
            min-height: 400px;

            &-left,
            &-right {
                width: 30%;
                box-sizing: border-box;
                background-color: $common-color;
            }

            &-center {
                flex: 1;
                background-color: $common-color;
                margin: 0px 20px;
            }

            .left-search {
                height: 40px;
                padding-left: 10px;
                display: flex;
                align-items: center;
                box-sizing: border-box;

                ::v-deep(.el-radio) {
                    margin-right: 10px;
                }

                .search-title {
                    line-height: 40px;
                }

                .search-form {
                    margin-left: 10px;
                    width: 200px !important;
                }
            }
        }

        &-bottom {
            flex: 1;
            box-sizing: border-box;
            display: flex;
            min-height: 300px;

            &-left {
                width: 30%;
                box-sizing: border-box;
                background-color: $common-color;
                display: flex;
                flex-direction: column;
            }

            &-right {
                flex: 1;
                box-sizing: border-box;
                background-color: $common-color;
                margin-left: $common-margin;
            }
        }

        .earchs {
            flex: 1;
            box-sizing: border-box;
        }
    }
</style>
